<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '0px',
    }"
  >
    <div class="wrap-other-roll">
      <!-- 专家推荐 -->
      <div class="card">
        <div class="title">专家推荐</div>
        <el-form :inline="true" :model="form" class="demo-form-inline more">
          <el-form-item label="更多跳转地址" required>
            <el-input
              v-model="form.moreUrl"
              maxlength="200"
              type="textarea"
              :rows="2"
              resize="none"
              style="width: 245px"
              placeholder="请输入更多跳转地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="详情跳转地址" required>
            <el-input
              v-model="form.detailUrl"
              maxlength="200"
              type="textarea"
              :rows="2"
              resize="none"
              style="width: 245px"
              placeholder="请输入详情跳转地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="获取数据个数" required>
            <el-input-number
              v-model="form.num"
              controls-position="right"
              :min="1"
              :max="3"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: center; padding-bottom: 20px">
        <span
          class="wrap-btn wrap-success"
          v-if="$checkPermission(101)"
          @click="save"
          >保存</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
    }
  },
  created() {
    this.itemList()
  },
  methods: {
    itemList() {
      // 获取详情
      this.$axios.get('/admin/mobile/findExpert').then((data) => {
        this.form = {}
        if (data.code == 200) {
          if (data.data) {
            this.form = data.data
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    save() {
      //保存
      if (!this.form.moreUrl) {
        this.$message.error('请输入更多跳转地址')
        return
      }
      if (!this.form.detailUrl) {
        this.$message.error('请输入详情跳转地址')
        return
      }
      if (!this.form.num) {
        this.$message.error('请输入获取数据个数')
        return
      }
      this.$axios.post('/admin/mobile/addExpert', this.form).then((data) => {
        if (data.code == 200) {
          this.$message.success('操作成功！')
          this.itemList()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
  .title {
    color: #45ab49;
    border-bottom: 1px solid #45ab49;
    padding: 10px 0;
  }

  .el-card {
    margin-top: 20px;
  }
  .more {
    margin-top: 20px;
  }
}
</style>
